<template>
  <q-dialog v-model="showDialog" persistent>
    <q-card class="q-py-none" style="min-width: 500px">
      <q-card-section class="row items-center">
        <div class="text-h6">设置/修改密码</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <q-card-section>
        <h-text-field
          v-model="newPassword"
          label="新密码"
          placeholder="请输入新密码"
          dense
          :type="showNewPassword ? 'text' : 'password'"
          :error="v.newPassword.$error"
          :error-message="v.newPassword.$errors[0] ? v.newPassword.$errors[0].$message : ''"
          @blur="v.newPassword.$validate()"
        >
          <template #append>
            <h-visibility-button v-model="showNewPassword"></h-visibility-button>
          </template>
        </h-text-field>

        <h-text-field
          v-model="confirmPassword"
          label="确认密码"
          placeholder="请再次输入新密码"
          dense
          :type="showConfirmPassword ? 'text' : 'password'"
          :error="v.confirmPassword.$error"
          :error-message="v.confirmPassword.$errors[0] ? v.confirmPassword.$errors[0].$message : ''"
          @blur="v.confirmPassword.$validate()"
        >
          <template #append>
            <h-visibility-button v-model="showConfirmPassword"></h-visibility-button>
          </template>
        </h-text-field>
      </q-card-section>

      <q-card-actions align="right" class="text-primary">
        <q-btn label="取消" color="red" v-close-popup />
        <q-btn label="确认" color="primary" @click="onSave()" />
      </q-card-actions>

      <q-inner-loading :showing="loading">
        <q-spinner-dots size="50px" color="primary" />
      </q-inner-loading>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import useVuelidate from '@vuelidate/core';
import { required, sameAs, helpers } from '@vuelidate/validators';
import { toast } from '@/lib/utils';
import { VARIABLES, API } from '@/configurations';
import { useCryptoStore } from '@herodotus-cloud/framework-kernel';

export default defineComponent({
  name: 'HChangePassword',

  props: {
    modelValue: { type: Boolean, default: false, required: true },
    userId: { type: String, required: true },
  },

  emits: ['update:modelValue'],

  setup(props, { emit }) {
    const newPassword = ref('');
    const confirmPassword = ref('');
    const showNewPassword = ref(false);
    const showConfirmPassword = ref(false);
    const loading = ref(false);

    const crypto = useCryptoStore();

    const showDialog = computed({
      get: () => props.modelValue,
      set: (newValue) => {
        emit('update:modelValue', newValue);
      },
    });

    const rules = {
      newPassword: {
        required: helpers.withMessage('新密码不能为空', required),
        regex: helpers.withMessage(
          '密码中必须包含大小字母、数字、特称字符，至少8个字符，最多25个字符',
          helpers.regex(/(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,25}/),
        ),
      },
      confirmPassword: {
        required: helpers.withMessage('请输入确认密码', required),
        regex: helpers.withMessage(
          '密码中必须包含大小字母、数字、特称字符，至少8个字符，最多30个字符',
          helpers.regex(/(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,25}/),
        ),
        sameAs: helpers.withMessage('两次输入密码不一致', sameAs(newPassword)),
      },
    };

    const v = useVuelidate(rules, { newPassword, confirmPassword }, { $lazy: true });

    const onSave = () => {
      v.value.$validate().then((result) => {
        if (result) {
          loading.value = true;
          const password = VARIABLES.isUseCrypto()
            ? crypto.encrypt(confirmPassword.value)
            : confirmPassword.value;
          API.core
            .sysUser()
            .changePassword(props.userId, password)
            .then((response) => {
              if (response) {
                loading.value = false;
                showDialog.value = false;
                toast.success('设置/修改密码成功！');
              }
            })
            .catch((error) => {
              loading.value = false;
              showDialog.value = false;
              toast.error('设置/修改密码失败！');
            });
        }
      });
    };

    return {
      showDialog,
      newPassword,
      confirmPassword,
      showNewPassword,
      showConfirmPassword,
      loading,
      v,
      onSave,
    };
  },
});
</script>
